<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>10-事件对象阻止默认行为</title>
</head>

<body>
  <div>123</div>
  <a href="http://www.baidu.com">百度</a>
  <form action="http://www.baidu.com">
    <input type="submit" value="提交">
  </form>
  <script>
    // 常见的事件对象属性和方法
    // 1. 返回事件类型
    var div = document.querySelector('div');
    div.addEventListener('click', fn);
    div.addEventListener('mouseover', fn);
    div.addEventListener('mouseout', fn);

    function fn(e) {
      console.log(e.type);
    }


    // 2. 阻止默认行为(事件)
    var a = document.querySelector('a');
    a.addEventListener('click', function (e) {
      // a. 这时再点击a链接将不进行跳转
      e.preventDefault(); // dom标准写法
    })

    // 3. 传统注册方式写法
    a.onclick = function (e) {
      // 普通浏览器
      // e.preventDefault();

      // IE678
      // e.returnValue;

      // 我们可以利用return falase 也能阻止默认行为
      // 但是 return 后，如果下面还有代码将不再执行
      // 只要传统注册方式可用
      return false
    }
  </script>
</body>

</html>